<template>
  <el-button
    :loading="loading"
    class="cu-btn"
    :class="[
      type,
      size,
      isIconBtn ? 'cuIcon' : '',
      plain ? 'plain' : '',
      radius ? 'radius' : '',
      round ? 'round' : '',
      disabled ? 'disabled' : '',
      block ? 'block' : '',
      full ? 'block full' : '',
    ]"
    :style="[{ width: width }, customStyle]"
    @click="handleClick"
  >
    <text :class="icon?.class ?? ''"></text>
    <slot></slot>
  </el-button>
</template>

<script setup>
import { computed, getCurrentInstance } from "vue";
const props = defineProps({
  size: {
    type: String,
    //default:"mini",
    validator(value) {
      return ["mini", "small", "medium"].includes(value);
    },
  },
  type: {
    type: String,
    default: "default",
    validator(value) {
      return [
        "primary",
        "success",
        "info",
        "warning",
        "danger",
        "default",
      ].includes(value);
    },
  },
  plain: {
    type: Boolean,
    default: false,
  },
  radius: Boolean,
  round: Boolean,
  disabled: Boolean,
  full: Boolean,
  block: Boolean,
  link: String,
  linkType: {
    type: String,
    default: "navigateTo",
  },
  width: String,
  customStyle: {
    type: Object,
    default() {
      return {};
    },
  },
  loading: { type: Boolean, default: false },
  icon: {
    type: Object, //
    validator(value) {
      if (typeof value === "object" && typeof value.class === "string") {
        return value.class.startsWith("cuIcon-");
      } else {
        return false;
      }
    },
  },
  circle: {
    type: Boolean,
    default: false,
  },
});

const curInstance = getCurrentInstance();

const isSlotExists = computed(() => {
  return !!curInstance.slots.default;
});

const isIconBtn = computed(() => {
  return !isSlotExists.value && props.icon && props.circle;
});

const emits = defineEmits(["click"]);

const handleClick = (e) => {
  if (props.link && !props.disabled) {
    uni[props.linkType]({
      url: props.link,
    });
  }
  !props.disabled && emits("click");
};
</script>
<style lang="scss" scoped>
.cu-btn {
  color: #fff;
  &.primary,
  &.primary.selected,
  &.selected {
    background-color: var(--primary);
  }
  &.success {
    background-color: var(--success);
  }
  &.info {
    background-color: var(--info);
  }
  &.warning {
    background-color: var(--warning);
  }
  &.danger {
    background-color: var(--danger);
  }

  &.plain,
  &.plain.selected {
    background-color: transparent;
    box-shadow: inset 0 0 0 1px currentColor;
    color: #999999;
  }

  &.medium {
    // width: auto !important;
    height: 60rpx;
    line-height: 60rpx;
    font-size: 13px;
    padding: 0 30rpx;
  }
  &.small {
    width: auto !important;
    height: 50rpx;
    line-height: 50rpx;
    font-size: 12px;
    padding: 0 20rpx;
  }
  &.mini {
    width: auto !important;
    height: 40rpx;
    line-height: 40rpx;
    font-size: 12px;
    padding: 0 20rpx;
  }
  &.block {
    display: flex;
    height: 100rpx;
    line-height: 100rpx;
    font-size: 14px;
    align-items: center;
    align-content: center;
    margin-left: var(--gutter) !important;
    margin-right: var(--gutter) !important;
    //font-size: 18px;
    width: auto;

    &.radius {
      border-radius: 16rpx;
    }
  }
  &.full {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  &::after {
    border: none;
  }

  &.radius {
    border-radius: 8rpx;
  }
  &.round {
    border-radius: 30px;
  }

  &.plain.primary,
  &.plain.selected {
    color: var(--primary);
  }

  &.plain.success {
    color: var(--success);
  }

  &.plain.warning {
    color: var(--warning);
  }

  &.plain.danger {
    color: var(--danger);
  }

  &.plain.info {
    color: var(--info);
  }

  &.disabled {
    opacity: 0.5;
  }
}
</style>
